<template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <span>基础信息</span>
        <!-- 教师操作按钮 -->
        <div v-if="isTeacherOwner">
          <el-button type="primary" link @click="$emit('edit')">编辑</el-button>
          <el-popconfirm title="确定删除这个班级吗？" @confirm="$emit('delete')">
            <template #reference>
              <el-button type="danger" link>删除</el-button>
            </template>
          </el-popconfirm>
        </div>
      </div>
    </template>
    <div v-if="classDetail">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="班级名称">{{ classDetail.name }}</el-descriptions-item>
        <el-descriptions-item label="课程">{{ classDetail.course || 'N/A' }}</el-descriptions-item>
        <el-descriptions-item label="年级">{{ classDetail.grade || 'N/A' }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getClassStatus(classDetail.startDate, classDetail.endDate).type">
            {{ getClassStatus(classDetail.startDate, classDetail.endDate).text }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="起止日期">{{ formatDate(classDetail.startDate) }} - {{ formatDate(classDetail.endDate) }}</el-descriptions-item>
        <el-descriptions-item label="班级容量">{{ classDetail.capacity }}</el-descriptions-item>
        <el-descriptions-item label="创建教师">
            <span v-if="teacherNameLoading">加载中...</span>
            <span v-else>{{ teacherName || '未知' }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="描述" :span="2">{{ classDetail.description || '无' }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <el-empty v-else description="暂无班级详情数据"></el-empty>
  </el-card>
</template>

<script setup>
/* global defineProps, defineEmits */
import { formatDate, getClassStatus } from '@/utils/formatters';

defineProps({
  classDetail: Object,
  isTeacherOwner: Boolean,
  teacherName: String,
  teacherNameLoading: Boolean,
});

defineEmits(['edit', 'delete']);
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 